// import React from 'react'
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { loadIllAPI } from '../Microsurgery/forums'
import { JumboTabs } from 'antd-mobile'
import { dalImg } from '../utils/tools'



function Microsurgery() {
  const [ills, setIlls] = useState([])
  //取数据()
  const [activeKey, setActiveKey] = useState("")
  const loadIllData = async () => {
    const reIlls = await loadIllAPI()
    setIlls(reIlls.data)
    console.log(reIlls.data)
    setActiveKey(reIlls.data[0].id)
  }
  useEffect(() => {
    loadIllData()
  }, [])



  return (
    <div className='main' style={{ width: "100%" }} >
      <h3 style={{ textAlign: "center" }}>香香香皮匠医美</h3>
      <div className='one'>

        ,
        <JumboTabs className='JB' activeKey={activeKey} onChange={(v) => {
          setActiveKey(v)
        }}>
          {ills.map(item => {
            return <JumboTabs.Tab
              title={item.name}
              description='香'
              key={item.id}>
              <h1 style={{ textAlign: "center" }} >{item.desc}</h1>
              <Link to={`/wzdetail/${item.id}`}>
                <div style={{ textAlign: "center" }} >
                  <img style={{ width: "600px" }} src={dalImg(item.image)} />
                </div>
              </Link>

            </JumboTabs.Tab>
          })}
          {/* <JumboTabs.Tab title='面部' description='完美娃娃脸' key='fruits'>
          </JumboTabs.Tab>
          <JumboTabs.Tab title='颈部' description='修长天鹅颈' key='vegetables'>
            嗨体颈部除皱
          </JumboTabs.Tab>
          <JumboTabs.Tab title='眼部' description='明艳大双眸' key='animals'>
            双眼皮手术
          </JumboTabs.Tab> */}
        </JumboTabs>
      </div>

    </div >

  )
}

export default Microsurgery